<%--
  Created by IntelliJ IDEA.
  User: RuoLi
  Date: 2023/1/6
  Time: 22:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>题库信息</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css">
    <!-- import Vue before Element -->
    <script src="<%=request.getContextPath()%>/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="<%=request.getContextPath()%>/js/element-ui.js"></script>
    <!-- axios -->
    <script src="<%=request.getContextPath()%>/js/axios.js"></script>
    <%--icon--%>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.woff">
    <%--数学公式样式--%>
    <%--    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>--%>
    <%--    <script   id="MathJax-script" async src="https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js"></script>--%>
<%--    <script type="text/javascript"--%>
<%--            src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>--%>
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="题库信息"></el-page-header>
    <el-divider></el-divider>
    <el-row :gutter="10">
        <el-col :span="3">
            <template>
                <el-select clearable v-model="selectTopicGrade" filterable placeholder="选择年级">
                    <el-option
                            v-for="item in topicGrade"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-col>
        <el-col :span="3">
            <template>
                <el-select clearable v-model="selectTopicType" filterable placeholder="选择题型">
                    <el-option
                            v-for="item in topicType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-col>
        <el-col :span="3">
            <template>
                <el-select clearable v-model="selectTopicChapterName" filterable placeholder="选择章节">
                    <el-option
                            v-for="item in topicChapterName"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-col>
        <el-col :span="3">
            <template>
                <el-select clearable v-model="selectTopicKnowledgePoint" filterable placeholder="选择知识点">
                    <el-option
                            v-for="item in topicKnowledgePoint"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" @click="queryDetailedTopic" :plain="true" icon="el-icon-search">
                搜索
            </el-button>
        </el-col>
    </el-row>
    <el-row :span="24" style="margin-top: 10px">
        <el-table

                :data="tableData"
                border
                height="615"
                style="width: 100%">
            <el-table-column
                    prop="topicDetailedId"
                    label="编号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="topicTitle"
                    label="题目"
                    width="500">
            </el-table-column>
            <el-table-column
                    prop="topicAnswer"
                    label="答案"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="topicCheck1"
                    label="选项一">
            </el-table-column>
            <el-table-column
                    prop="topicCheck2"
                    label="选项二">
            </el-table-column>
            <el-table-column
                    prop="topicCheck3"
                    label="选项三">
            </el-table-column>
            <el-table-column
                    prop="topicCheck4"
                    label="选项四">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button
                            icon="el-icon-delete"
                            size="small"
                            type="primary"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row style="margin-top: 10px">
        <template>
            <div class="block">
                <el-pagination
                        layout="prev, pager, next"
                        :total="totalPage"
                        :current-page.sync="currentPage"
                        @current-change="CurrentChange">
                </el-pagination>
            </div>
        </template>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                detailedTopicPage: [],
                topicGrade: [{
                    value: '七年级',
                    label: '七年级'
                }, {
                    value: '八年级',
                    label: '八年级'
                }],
                topicType: [{
                    value: '选择题',
                    label: '选择题'
                }, {
                    value: '填空题', label: '填空题'
                }, {
                    value: '判断题',
                    label: '判断题'
                }],
                topicChapterName: [{
                    value: '方程与不等式',
                    label: '方程与不等式'
                }, {
                    value: '有理数',
                    label: '有理数'
                }],
                topicKnowledgePoint: [{
                    value: '一元一次方程',
                    label: '一元一次方程'
                }, {
                    value: '正数和负数',
                    label: '正数和负数'
                }],
                selectTopicGrade: '',
                selectTopicType: '',
                selectTopicChapterName: '',
                selectTopicKnowledgePoint: '',
                //题目详细id
                topicDetailedId: '',
                //当前页
                currentPage: 1,
                totalSize: 0,
                totalPage: 0,
            }
        },
        create() {
        },
        mounted: function () {
            this.getDetailedTopicData();
        },
        methods: {
            goBack() {
                window.location.href = "/online_website/admin/index_admin.jsp";
            },
            //跳转加载数据
            getDetailedTopicData() {
                // 获取数据
                axios.get('/online_website/common/detailedTopicInfo').then((res) => {
                    this.tableData = res.data;
                });
                //获取分页数据量
                //发送数据
                axios({
                    url: "/online_website/common/detailedTopicPage",
                    method: "post",
                    contentType: "application/json",
                    params: {
                        currentPage: this.currentPage,
                        pageSize: '10'
                    }
                }).then((res) => {
                    var totalPage = res.data["totalPage"];
                    this.totalSize = res.data["totalSize"]
                    this.totalPage = totalPage * 10;
                });
            },
            handleDelete(row, index) {
                this.topicDetailedId = index.topicDetailedId;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    //获取题目详细编号
                }).then(() => {
                    //发送数据
                    axios({
                        url: "/online_website/common/detailedTopicDelete",
                        method: "get",
                        contentType: "application/json",
                        params: {
                            DetailedTopicId: this.topicDetailedId,
                        }
                    }).then((res) => {
                        //隐藏表格数据
                        var status = res.status;
                        if (status === parseInt(200)) {
                            this.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '失败',
                                message: '删除失败',
                                type: 'error'
                            });
                        }

                    });

                }).catch(() => {
                    this.$notify({
                        message: '已取消删除',
                        type: 'info'
                    });
                });
            },
            CurrentChange(value) {
                this.currentPage = value;
                console.log("跳转到：" + value);
                //发送数据
                axios({
                    url: "/online_website/common/detailedTopicPage",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        currentPage: this.currentPage,
                        pageSize: '10'
                    }
                }).then((res) => {
                    //获取分页数据
                    this.detailedTopicPage = res.data;
                    //更改表格元素
                    //发送数据
                    //接收分页数据
                    console.log(res.data);
                    //更新表格 分页数据
                    this.tableData = res.data;
                    // this.getDetailedTopicCurrentPageData()
                });
            },
            //搜索
            queryDetailedTopic(){

            }
        },
        computed: {
            activeIndex: {
                get: function () {
                    return this.$store.getters.activeMenu;
                },
                set: function () {
                },
            },
        },
    })
</script>
</html>
